<template>
    <div>
        <p class="warn"><img src="../../assets/images/charts.png">展开查看最近七次检查指标展示</p>
        <div class="charts-box" v-for="(item,index) in list"  :key="index">
            <div class="charts-box-top" @click="toggleChars($event,item,index)">
                <span class="typeName">{{item.xm}}</span>
                <div>
                    <span class="number">{{item.result}}</span>
                    <img v-show="item.isNormal == 4" class="project-icon" src="../../assets/images/down.png" />
                    <img v-show="item.isNormal == 3" class="project-icon" src="../../assets/images/up.png" />
                </div>
                <span class="prompt">{{item.showText}}</span>
                <i :class="item.isShow?'icon-up':'icon'"></i>
            </div>
            
            <!-- <div class="charts" v-show="item.isShow">
               
            </div> -->
            <div v-show="item.echartsType=='2' && item.isShow" class="beizhu">
                <p><span></span> 蓝色为正常区域</p>
                <p><span></span> 正常血红蛋白</p>
                <p><img src="../../assets/images/down.png"> 非正常值</p>
            </div>
        </div>
        <div class="box" v-show="isShow" >
            <div class="main">
                <div id="mycharts" style ="width:350px;height:350px;">
               
                </div>
                <!-- <p>{{boxData.yy}}</p>
                <p>{{boxData.date}}</p>
                <p>{{boxData.value}}</p> -->
                <img src="../../assets/images/close.png" alt="" @click="isShow = false">
            </div>

        </div>
        <!-- 水印 -->
        <div class="watermark"></div>
    </div>
</template>

<script>
//  控制坐标轴换行
function newline(option, number, axis){
                /* 此处注意你的json是数组还是对象 */
    option[axis][0]['axisLabel']={
        interval: 0,
        formatter: function(params){
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = number;
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                    } else {
                        tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                }
            } else {
                newParamsName = params;
            }
            return newParamsName
        }
    }
    return option;
    }
import fallImg from '../../assets/images/down.png'
import upImg from '../../assets/images/up.png'
import isNormal from '../../assets/images/isnormal.png'
import wran from '../../assets/images/wran.png'
export default {
    name: 'jyCharts',
    data () {
        return {
            list:[],
            showText:'展开查看',
            curIndex:null,
            resourceId:'310000198302248722',
            sfId:'',
            fallImg:fallImg,
            idCard:'',
            date:'',
            upImg:upImg,
            isNormal:isNormal,
            bgDate:'',
            wran:wran,
            isShow:false,
            boxData:{},
            popupVisible:true
        }
    },
    methods:{
        getList(){
            //获取列表信息
            var that = this
            var id = that.idCard || '5960325'
            var date = that.bgDate || '2018-11-03'
            var url ='api/fhir/Observation?identifier=http://www.shdc.org.cn/fhir/codesystem/BGDH|'+id+'&date='+date+'&_format=json'
            this.$axios.get(
                encodeURI(url),
                {
                    headers: {
                        'Content-Type':'application/x-www-form-urlencoded',
                        'appCode':'kOYkfM',
                        "sign":'4A36B9B6AD555F602431605BC53C4AE6'
                        
                    },
                }
            )
            .then(function (res) {
                var data= res.data.entry
                if(data[0]){
                    data.forEach(item =>{
                        var obj = {}
                        obj.xm = item.resource.code.coding[0].display
                        obj.charts = {
                            value:[],
                            yy:[],
                            date:[],
                            isNormal:[],
                            low:[],
                            high:[]
                        }
                        obj.ckz = item.resource.referenceRange[0].text
                        if(item.resource.referenceRange[0].low){
                            obj.low = item.resource.referenceRange[0].low.value
                        }
                        if(item.resource.referenceRange[0].high){
                            obj.high = item.resource.referenceRange[0].high.value
                        }
                        obj.isNormal = item.resource.interpretation.coding[0].code
                        obj.isShow = false
                        obj.jzTime = item.resource.effectiveDateTime.substring(0,10)
                        if(item.resource.valueQuantity){
                            obj.result = item.resource.valueQuantity.value
                        } else {
                            obj.result = ''
                        }
                        
                        obj.showText = '展开查看'
                        if(item.resource.identifier[0]){
                            obj.echartsType = item.resource.identifier[0].value
                        } else{
                            obj.echartsType = ''
                        }
                        
                        item.resource.code.coding.forEach(code =>{
                            if(code.system == 'http://www.shdc.org.cn/fhir/codesystem/JYZB'){
                                obj.code = code.system + '|' + code.code
                            }
                        })
                        that.list.push(obj)

                    })
                }else {
                    console.log('请求不到数据')
                }
                

            })
            .catch(function (error) {
                console.log(error);
            });

        },
        toggleChars(e,item,index){
            // var dom  = e.currentTarget.nextElementSibling
            var dom =''
            var dom = document.getElementById('mycharts')
            this.curIndex = index
            if(item.showText == '展开查看') {
                item.showText = '收起查看'
                this.isShow = true
            } else {
                item.showText = '展开查看'
                
            }
            var show = !item.isShow
            // this.$set(this.list, index, { ...this.list[index], isShow: show })
            item.isShow = !item.isShow


            this.$set(this.list, index,item)
            var obj = this.list[index]
            // if(!obj.charts[0] && (obj.xm.replace('计数','') =='红细胞'||obj.xm.replace('计数','')=='白细胞') || obj.xm == '血红蛋白'){
            //     this.getCahrts(item,dom)
                
            // }
            
            if(obj.charts.value.length==0){
                this.getCahrts(item,dom)
                // alert('ok')
            }
           
            
        },
        getCahrts(item,dom){
            //查询患者信息
            var that = this
            var date = that.date || '2018-12-05'
            var sfId = that.sfId || '310000198302248722'
            // var url = '/api/fhir/Observation?subject:Patient='+that.resourceId+'&date=lt'+item.jzTime+'&_sort=-effective&_count=7&code='+item.code+'&_format=json'
            var url = '/api/fhir/Observation?subject:Patient='+sfId+'&date=lt'+date+'&_sort=-effective&_count=7&code='+escape(item.code)+'&_format=json'

            this.$axios.get(
                url,
                {
                    headers: {
                        'Content-Type':'application/x-www-form-urlencoded',
                        'appCode':'kOYkfM',
                        "sign":'4A36B9B6AD555F602431605BC53C4AE6'
                        
                    },
                }
            )
            .then(function (res) {
                var data = res.data.entry
                if(data[0]){
                    data.forEach(item=>{
                        var pushValue= ''
                        if(item.resource.valueQuantity) {
                            pushValue= item.resource.valueQuantity.value
                        }
                        var pushYy = item.resource.performer[0].display.substring(0,3)
                        var pushDate = item.resource.effectiveDateTime.substring(0,10)
                        var pushNormal = item.resource.interpretation.coding[0].code
                        var pushLow = ''
                        var pushHigh = ''
                        if(item.resource.referenceRange[0].low) {
                            pushLow = item.resource.referenceRange[0].low.value
                        } else  {
                            pushLow = ''
                        }
                        if(item.resource.referenceRange[0].high){
                            pushHigh = item.resource.referenceRange[0].high.value
                        } else  {
                            pushHigh = ''
                        }
                        // var pushLow = item.resource.referenceRange[0].low.value
                        that.list[that.curIndex].charts.value = that.list[that.curIndex].charts.value.concat(pushValue)
                        that.list[that.curIndex].charts.yy = that.list[that.curIndex].charts.yy.concat(pushYy)
                        that.list[that.curIndex].charts.date = that.list[that.curIndex].charts.date.concat(pushDate)
                        that.list[that.curIndex].charts.isNormal = that.list[that.curIndex].charts.isNormal.concat(pushNormal)
                        that.list[that.curIndex].charts.low = that.list[that.curIndex].charts.low.concat(pushLow)
                        that.list[that.curIndex].charts.high = that.list[that.curIndex].charts.high.concat(pushHigh)
                    })
                }
                console.log(item)
                if(item.echartsType=='2'){
                    //柱状图
                    that.echartsDrawxhdb(dom,that.list[that.curIndex].charts,item)
                } else if(item.echartsType=='1') {
                    //折现图
                    that.echartsDraw(dom,that.list[that.curIndex].charts,item)
                }
                
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        echartsDraw(e,res,item){
            //红细胞和(白细胞图表
            var that = this
            var images 
            var max = item.high
            var min = item.low || ''
            var yMax
            var data = item.charts.value
            var name = item.xm.replace('计数','')
            var textColor 
            var maxValue = Math.max.apply(null, data);
            if(maxValue >max) {
                yMax = maxValue

            } else {
                yMax =max
            }
            if(name == '红细胞'){
                textColor = '#0CB7F5'
            } else if(name == '白细胞') {
                textColor = '#07B98C'
            } else {
                textColor = '#0CB7F5'
            }
            var title = '近七次'+name+'数据'
            var myChart = this.$echarts.init(e)
            var markPoint =[]
            var markColor
            //定义markpoint里面的颜色
            item.charts.value.forEach((val,index)=>{
                var obj={
                    label:{}
                }
                var size 
                if(item.charts.isNormal[index] == 4){
                    //偏低
                    images = this.fallImg
                    size = 15
                } else {
                    //其他
                    images = this.fallImg
                    size = 1
                }
                obj.coord = [index,val]
                obj.symbol = 'image://'+images
                obj.symbolSize = size
                if(item.charts.isNormal[index] ==3 || item.charts.isNormal[index] ==4 || item.charts.isNormal[index] ==1){
                    
                }
                markPoint.push(obj)
            })
        
            var option = {
                title: {
                    subtext: '参考值'+item.ckz,
                    left: 'right',
                    
                },
                tooltip : {
                    trigger: 'axis',
                    // show:false,
                },
                legend: {
                    data:[{
                        name:title
                    }],
                    x: 'left',
                    textStyle:{
                        color:textColor
                    },
                    borderColor:{
                        color:textColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : item.charts.date.map(function(value){
                            return value.replace(/-/g,"/")
                        }),
                        axisLine:{
                            lineStyle:{
                                color:'#666',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#666',//坐标值得具体的颜色
                                fontStyle:'italic'
                            },
                            margin:10
                        },
                        splitLine:{show: false},
                        nameGap:5,
                        nameLoction:'start',
                        interval:0,
                    },
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : item.charts.yy,
                        axisLine:{
                            lineStyle:{
                                color:'#666',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#666',//坐标值得具体的颜色
                                fontStyle:'italic'
                            }
                        },
                        splitLine:{show: false},
                        nameGap:5,
                        nameLoction:'start',
                        interval:10,
                        nameTextStyle:{
                            
                        }
                    }
                    
                ],
                yAxis : [
                    {
                        max:yMax,
                        name:'g/L',
                        nameGap: 25,
                        nameTextStyle:{
                            color:'#666'
                        },
                        type : 'value',
                        axisLine:{
                            lineStyle:{
                                color:'#2EBFF4',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#666',//坐标值得具体的颜色
        
                            }
                        }
                    }
                ],
                series : [
                    {
                        name:title,
                        type:'line',
                        stack: '总量',
                        areaStyle: {normal: {color:'#E6F8F3'}},
                        itemStyle: {
                            normal: {
                                color: textColor,
                                lineStyle: {
                                    color: textColor
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'top',
                                color:'#333',
                                fontSize:11,
                                formatter:function(value){
                                    var dataIdex
                                    item.charts.value.forEach((it,index)=>{
                                        if(it == value.data){
                                            dataIdex = index
                                        }
                                    })
                                    return item.charts.date[dataIdex].replace(/-/g,"/")
                                    
                                },
                                width:10,
                                rich:{
                                    width:10,
                                    height:10
                                }
                            }
                        },
                        markPoint: { // markLine 也是同理
                            // data: markPoint,
                            data:markPoint,
                            symbolSize:20,
                            color:textColor,
                            symbolOffset:[0,'60%']
                        },
                        data:data,
                        markLine: {
                            data: [
                                { 
                                    name: '下限',
                                    yAxis:min,
                                    symbol: 'none',
                                    label:{
                                        normal:{
                                            formatter: '下限'
                                        }
                                    },
                                    lineStyle:{
                                        color:'#ff7768',
                                        type:'dashed'
                                    },
                                },
                                { 
                                    name: '上限',
                                    yAxis:max,
                                    symbol: 'none',
                                    label:{
                                        normal:{
                                            formatter: '上限'
                                        }
                                    },
                                    lineStyle:{
                                        color:'#EB9124',
                                        type:'dashed'
                                    }
                                }
                            ]
                        }
                    },
                ]
            }
            newline(option,5, 'xAxis')
            newline(option,5, 'xAxis')
            myChart.setOption(option,true)
   
            // myChart.on('click',function(params){
            //     console.log(params);
            //     that.showBox(params,item)
            // });
        },
        echartsDrawxhdb(e,res,item){
            var that = this
            var images 
            var upimg = this.upImg
            var myChart = this.$echarts.init(e)
            var data=item.charts.value
            var yMax
            if(Math.max.apply(null,item.charts.high)<Math.max.apply(null,item.charts.value)){
                //如果返回参数的最高值小于返回数据的最高值，则y轴的最高值为返回数据的最高值
                
                if(Math.max.apply(null,item.charts.high)<1){
                    yMax = Math.max.apply(null,item.charts.value)
                } else {
                    yMax = Math.max.apply(null,item.charts.value)
                }
            } else {
                if(Math.max.apply(null,item.charts.high)<1){
                    yMax = Math.max.apply(null,item.charts.high)
                } else {
                     yMax = Math.max.apply(null,item.charts.high)
                }
                
            }

            var dataShadow = [];
            var textColor 
            var markPoint = []
            var highData =[]
            var lowData = []
            item.charts.low.map(val=>{
                if(!val){
                    Math.min.apply(null,item.charts.value)
                }
            })
            //灰色阴影值处理 最高值-最低值
            item.charts.high.forEach((val,index)=>{
                var value = val-item.charts.low[index]
                highData = highData.concat(value)
            })
            for (var i = 0; i < data.length; i++) {
                dataShadow.push(yMax);
            }
            //定义markpoint里面的颜色
            item.charts.value.forEach((val,index)=>{
                var obj={
                    label:{}
                }
                var size 
                if(item.charts.isNormal[index] == 3){
                    //偏高
                    images = this.upImg
                    textColor = '#FF7768'
                    size = 15
                } else if(item.charts.isNormal[index] == 4){
                    //偏低
                    images = this.fallImg
                    textColor = '#FF7768'
                    size = 15
                } else if(item.charts.isNormal[index] == 1){
                    //正常
                    images = this.isNormal
                    textColor = '#2EBFF4'
                    size = 10
                } else {
                    images = this.wran
                    textColor = '#666'
                    size = 10
                }
                obj.coord = [index,val]
                obj.symbol = 'image://'+images
                obj.label.color = textColor
                obj.symbolSize = size
                if(item.charts.isNormal[index] ==3 || item.charts.isNormal[index] ==4 || item.charts.isNormal[index] ==1){
                    
                }
                markPoint.push(obj)
            })
            
            var labelOption = {
                normal: {
                    show: true,
                    rich: {
                        name: {
                            color:'#666'
                        }
                    }
                }
            };
            var option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type : 'category',
                        splitLine: {show:false},
                        data : item.charts.date.map(function(value){
                            return value.replace(/-/g,"/")
                        }),
                        axisLine:{
                            lineStyle:{
                                color:'#666',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#666',//坐标值得具体的颜色
                                fontStyle:'italic'
                            }
                        },
                        formatter:function(params){
                        //粘贴以下function内未注释的代码
                        }
                    },
                    {
                        type : 'category',
                        splitLine: {show:false},
                        data :item.charts.yy.map(function(val){
                            return val
                        }),
                        axisLine:{
                            lineStyle:{
                                color:'#666',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#666',//坐标值得具体的颜色
                            },
                            interval:0
                        },
                    }
                ],
                yAxis: {
                    max:yMax,
                    name:'g/L',
                    nameGap: 25,
                    nameTextStyle:{
                        color:'#666'
                    },
                    type : 'value',
                    //设置刻度线样式
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dotted',
                            color:'#D6D6D6'
                        }
                    },
                    //设置坐标轴颜色
                    axisLine:{
                        lineStyle:{
                            color:'#2EBFF4',
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#666',//坐标值得具体的颜色
    
                        }
                    },
                },
                stack: 'component',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#eee'
                    }
                },
                series: [
                    { // For shadow
                        type: 'bar',
                        itemStyle: {
                            normal: {color: '#F8F5F5'}
                        },
                       // barGap:'-100%',
                        barCategoryGap:'40%',
                        data: dataShadow,
                        animation: false
                    },
                    {
                        name: '辅助',
                        type: 'bar',
                        stack:  '总量',
                        itemStyle: {
                            normal: {
                                color: '#F8F5F5'
                            },
                        },
                        barGap:'-100%',
                        barCategoryGap:'40%',
                        data: item.charts.low
                    },
                    {
                        name: '生活费',
                        type: 'bar',
                        stack: '总量',
                        markPoint: { // markLine 也是同理
                            // data: markPoint,
                            data:markPoint,
                            symbolSize:20,
                            label:{
                                show:true,
                                formatter:function(val){
                                    return  val.data.coord[1]

                                },
                                position: [0,-30],
                                offset:[0,20]
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#D3F3F9'
                            },
                        },
                        data:highData,
                    },
                ]
            }
            newline(option,5, 'xAxis')
            myChart.setOption(option,true)
            // myChart.on('click',function(params){
            //     that.showBox(params,item)
            // });
        },
        showBox(params,item){
            var that = this 
            var index = params.dataIndex
            
            
            that.boxData.date = params.name
            that.boxData.yy = item.charts.yy[index]
            if(params.componentSubType == 'line') {
                that.boxData.value = params.value
            } else if(params.componentSubType =='bar'){
                that.boxData.value = item.charts.value[index]
            }
            that.isShow = true
        }
        
    },
    created(){
        // this.list = JSON.parse(sessionStorage.getItem('bgjdData'))
        // this.list.forEach(item=>{
        //     item.showText = '展开查看'
        //     item.isShow = false
        // })
        // if(sessionStorage.getItem('hzResourceId')) {
        //     this.resourceId = sessionStorage.getItem('hzResourceId')
        // }
        

        this.idCard = this.$route.query.bgdh
        this.date = this.$route.query.bgsj
        this.sfId = this.$route.query.sfId
        this.bgDate = this.$route.query.bgsj
        if(this.bgDate) {
            this.getList()
        }
        this.getList()
        
        
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    html{font-size: 10px;}
    *{margin: 0;padding: 0;}
    .warn{color: #919191;font-size: 1.3rem;line-height: 3rem;
        img{
            vertical-align: middle;
            width: 2rem;
            margin-left:2rem;
            margin-right: 1rem;
        }
    }
    .charts-box{background-color: #fff;margin: 1rem 0;line-height: 3rem;position: relative;}
    .charts-box-top{position: relative;text-align: center;display: flex;line-height:4rem;}
    .charts-box-top>span{display:inline-block;overflow: hidden;flex:2; overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap}
    .charts-box-top>div{display: inline-block;overflow: hidden;flex:1;}
    .icon{position: absolute;right: 1.5rem;background: url('../../assets/images/more.png') no-repeat;background-size: 100% 100%;
    width: 1rem;height: 1rem;top: 50%;transform: translateY(-50%);}
    .icon-up{background: url('../../assets/images/shou.png') no-repeat;background-size: 100% 100%;width: 1.5rem;height: 1.5rem;top: 50%;transform: translateY(-50%);position: absolute;right: 1.5rem;}
    .icon-fall{background: url('../../assets/images/fall.png') no-repeat;background-size: 100% 100%;
    width: 2rem;height: 1.4rem;position: absolute;top: 50%;transform: translateY(-50%);}
    .typeName,.number{font-size: 1.3rem;}
    .icon-raise{background: url('../../assets/images/raise.png') no-repeat;background-size: 100% 100%;
    width: 2rem;height: 1.4rem;position: absolute;top: 50%;transform: translateY(-50%);}
    .prompt{color: #919191;font-size: 1.3rem;}
    .charts{min-height: 20rem;margin:0 auto;position: relative;
        
    }
    .beizhu{
            position: absolute;
            top:4.5rem;
            left:0;
            justify-content:space-between;
            text-align: left;
            // padding-left:3%;
            p{
                font-size: 1.5rem;
                display: inline-block;
                margin-right:1rem
            }
            p{
                span{
                    display: inline-block;
                    width: 1rem;
                    height:1rem;
                    background: #D3F3F9;
                    vertical-align: middle;
                }
                img{
                    width: 1.5rem;
                    vertical-align: middle;
                }
            }
            p:nth-child(2){
                span{
                    background:linear-gradient(45deg,rgba(12,183,245,1),rgba(180,231,255,1));
                    border-radius: 50%;
                    overflow: hidden;
                    vertical-align: middle;
                }
            }
        }
    
    .charts-box-top img{
        width: 1.5rem;
        vertical-align: middle;

    }
    .box{
        width: 100vw;
        height:100vh;
        background: rgba(0,0,0,0.5);
        
        position: fixed;
        top:0;
        left:0;
        .main{
            height:30rem;
            width: 28rem;
            position: absolute;
            top:50%;
            left:50%;
            margin-top:-15rem;
            margin-left:-14rem;
            font-size: 2rem;
            background: #fff;
            color:#666;
            border-radius:1rem; 
            p{
                line-height: 2rem;
                padding:0.5rem 1rem;
            }
            p:first-child{
                padding-top:5rem;
            }
        }
        img{
            position: absolute;
            top:1rem;
            right:1rem;
            width: 1.5rem;
        }
    }
</style>
